<template>
	<view class="container">
		<view class="header">
			<text class="title">我的班级</text>
			<text class="subtitle">学生概览</text>
		</view>

		<view class="relationship-container">
			<view class="circle-center">
				<!-- 中间老师 -->
				<view class="teacher-card">
					<!-- 动态显示当前选中人物的头像 -->
					<image
						:src="currentPerson.userId ? getAvatarUrl2(currentPerson.aver) : getAvatarUrl(teacher.avatarUrl)"
						class="teacher-avatar" 
						@click="handleCenterClick"/>
					<view class="teacher-info">
						<text class="teacher-name">{{currentPerson.studentName || teacher.name}}</text>
					</view>
				</view>

				<!-- 学生环绕 -->
				<view class="students-container">
					<view v-for="(student, index) in students" :key="index" class="student-card"
						:style="getStudentPosition(index, students.length)" @click="showStudentInfo(student)">
						<image :src="getAvatarUrl2(student.aver)" class="student-avatar" />
						<text class="student-name">{{student.studentName}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 信息弹窗 -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog :title="currentPerson.studentName" :content="currentPerson.bio"
				confirmText="关闭"></uni-popup-dialog>
		</uni-popup>
		<view class="student-cards-container">
			<view class="score-card card" @click="navigateToscore()">
				<view class="card-content">
					<uni-icons type="medal" size="30" color="#fff"></uni-icons>
					<text class="card-title">学业成绩</text>
					<text class="card-desc">各科成绩分析</text>
				</view>
				<uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
			</view>

			<view class="praise-card card" @click="navigateTopraise()">
				<view class="card-content">
					<uni-icons type="star-filled" size="30" color="#fff"></uni-icons>
					<text class="card-title">表扬记录</text>
					<text class="card-desc">查看表扬记录</text>
				</view>
				<uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
			</view>

			<view class="homework-card card" @click="navigateTohomework()">
				<view class="card-content">
					<uni-icons type="compose" size="30" color="#fff"></uni-icons>
					<text class="card-title">作业情况</text>
					<text class="card-desc">查看作业情况</text>
				</view>
				<uni-icons type="arrowright" size="20" color="#fff"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		onLoad(option) {
			let that = this;
			this.students = JSON.parse(option.detail)
			uni.getStorage({
				key: 'teacher',
				success(res) {
					that.teacher = res.data;
				}
			})
		},
		data() {
			return {
				teacher: {},
				students: [],
				currentPerson: {},
				hasSelectedStudent: false
			}
		},
		methods: {
			// 新增中间头像点击处理
			handleCenterClick() {
				if (!this.hasSelectedStudent) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}
				uni.previewImage({
					urls: [this.currentPerson.userId ? this.getAvatarUrl2(this.currentPerson.aver) : this.getAvatarUrl(this.teacher.avatarUrl)],
					current: 0,
					indicator: 'default',
					loop: true
				});
			},
			navigateTohomework() {
				if (!this.hasSelectedStudent) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/homeWorkHistroy/homeWorkHistroy?grade=" + this.currentPerson.grade
				})
			},
			navigateToscore() {
				if (!this.hasSelectedStudent) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/scoreHistroyOne/scoreHistroyOne?studentId=" + this.currentPerson.userId
				})
			},
			navigateTopraise() {
				if (!this.hasSelectedStudent) {
					uni.showToast({
						title: '请先选择学生',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/pariseHistoryOne/pariseHistoryOne?studentId=" + this.currentPerson.userId +
						"&grade=" + this.currentPerson.grade
				})
			},
			getAvatarUrl2(avatarUrl) {
				if (!avatarUrl || avatarUrl === 'null') {
					return '/static/aver1.jpg';
				}
				return globalVariable + '/get/' + avatarUrl;
			},
			getAvatarUrl(avatarUrl) {
				if (!avatarUrl || avatarUrl === 'null') {
					return '/static/aver2.jpg';
				}
				return globalVariable + '/get/' + avatarUrl;
			},
			getStudentPosition(index, total) {
				const radius = 180;
				const centerAngle = Math.PI * 2 / total;
				const angle = index * centerAngle - Math.PI / 2;

				return {
					left: `calc(50% + ${Math.cos(angle) * radius}px - 50px)`,
					top: `calc(50% + ${Math.sin(angle) * radius}px - 50px)`,
					transform: `rotate(${angle + Math.PI/2}rad)`
				};
			},
			showTeacherInfo() {
				this.currentPerson = this.teacher;
				this.$refs.popup.open();
			},
			showStudentInfo(student) {
				this.currentPerson = student;
				this.hasSelectedStudent = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 样式部分保持不变，与之前相同 */
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-height: 100vh;
		background-image: radial-gradient(circle at 10% 20%, rgba(255, 15, 51, 0.1) 0%, transparent 20%),
		radial-gradient(circle at 90% 80%, rgba(8, 255, 111, 0.1) 0%, transparent 20%);
		padding: 20px;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	.header {
		margin-bottom: 40px;
		text-align: center;

		.title {
			font-size: 28px;
			font-weight: 600;
			color: #2d3748;
			display: block;
			margin-bottom: 8px;
			letter-spacing: 0.5px;
		}

		.subtitle {
			font-size: 16px;
			color: #718096;
			display: block;
			font-weight: 400;
		}
	}

	.relationship-container {
		position: relative;
		width: 100%;
		max-width: 800px;
		height: 400px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 24px;
		padding: 20px;
	}

	.circle-center {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.teacher-card {
		position: relative;
		z-index: 10;
		width: 150px;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: white;
		border-radius: 18px;
		padding: 20px;
		box-shadow: 0 10px 20px rgba(74, 108, 247, 0.15);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

		&:active {
			transform: scale(0.98);
		}

		.teacher-avatar {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			border: 4px solid #fff;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			object-fit: cover;
			margin-bottom: 15px;
			background: linear-gradient(135deg, #4a6cf7, #2541b2);
		}

		.teacher-name {
			font-size: 18px;
			font-weight: 600;
			color: #2d3748;
			display: block;
		}
	}

	.students-container {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		animation: rotateRing 30s linear infinite;
		transform-origin: center center;
	}

	.student-card {
		position: absolute;
		width: 80px;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 16px;
		padding: 12px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
		z-index: 5;
		animation: unrotate 30s linear infinite;
		transform-origin: center center;

		&:hover {
			transform: translateY(-5px) scale(1.05);
			box-shadow: 0 8px 25px rgba(74, 108, 247, 0.15);
		}

		&:active {
			transform: translateY(0) scale(0.98);
		}

		.student-avatar {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			border: 3px solid #fff;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
			object-fit: cover;
			margin-bottom: 8px;
			background: linear-gradient(135deg, #9b59b6, #8e44ad);
		}

		.student-name {
			font-size: 12px;
			font-weight: 500;
			color: #4a5568;
			text-align: center;
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.student-cards-container {
		margin-top: 40px;
		width: 100%;
		max-width: 800px;
		padding: 0 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;

		.card {
			border-radius: 18px;
			padding: 24px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;
			overflow: hidden;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

			&:active {
				transform: scale(0.98);
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(135deg, var(--start-color), var(--end-color));
				z-index: 0;
				opacity: 0.95;
			}

			.card-content {
				z-index: 1;

				.card-title {
					display: block;
					font-size: 18px;
					font-weight: 600;
					color: #fff;
					margin-bottom: 8px;
				}

				.card-desc {
					font-size: 14px;
					color: rgba(255, 255, 255, 0.85);
					font-weight: 400;
				}
			}

			.uni-icons {
				align-self: flex-end;
				z-index: 1;
			}
		}

		.score-card {
			--start-color: #62d0ff;
			--end-color: #78a1ff;
		}

		.praise-card {
			--start-color: #ff6e55;
			--end-color: #ffca4e;
		}

		.homework-card {
			--start-color: #1dd1a1;
			--end-color: #10ac84;
		}
	}

	@keyframes rotateRing {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes unrotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(-360deg);
		}
	}

	@media (max-width: 768px) {
		.relationship-container {
			height: 500px;
		}

		.student-cards-container {
			grid-template-columns: 1fr;
		}

		.teacher-card {
			width: 130px;
			padding: 15px;

			.teacher-avatar {
				width: 80px;
				height: 80px;
			}
		}

		.student-card {
			width: 70px;
			padding: 10px;

			.student-avatar {
				width: 50px;
				height: 50px;
			}
		}
	}
</style>